<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .add {
        border: 1px solid #000;
        max-width: 700px;
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    table,
    td,
    th {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 700px;
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号：
            <input type="text" v-model="code">
            商品名称：
            <input type="text" v-model="goodsName">
            产品图片地址：
            <input type="text" v-model="imgUrl">
            价格：
            <input type="text" v-model="price">
            <button @click="add">点击增加</button>
        </div>
        <div class="tb">
            <table>
                <tr>
                    <th>
                        全选：
                        <input type="checkbox" @change="allCheckChange" :checked="allCheck">
                    </th>
                    <th>
                        产品图片
                    </th>
                    <th>
                        编号
                    </th>
                    <th>
                        品牌名称
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr v-for="(item,i) in goods">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img width="50" height="50" :src="item.imgUrl" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button :disabled="item.inventory==1" @click="decrease(item)">-</button>
                        <b>{{item.inventory}}</b>
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(i)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" v-show="!goods.length">
                没有更多的数据
            </div>
            <div class="add" style="
            width:658px;text-align:right">
                <h1>总价:{{total}}</h1>
            </div>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            //所有的小方格初始值未 false
            allCheck: false,
            //编号
            code: "",
            //图片的地址
            imgUrl: "",
            //商品的名称
            goodsName: "",
            //商品的数量
            price: "",
            //被勾选的内容
            checks: [],
            //商品的信息
            goods: [
                {
                    id: 1,
                    goodsName: '苹果',
                    imgUrl: "https://img1.baidu.com/it/u=3325655487,149194487&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=281",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 1,
                    goodsName: '香蕉',
                    imgUrl: "https://img2.baidu.com/it/u=2881206806,612781901&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=379",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 1,
                    goodsName: '梨子',
                    imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F725677994%2FO1CN01FwDzMx28vIm1hNtLv_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674962534&t=d8b87858060bd1fe08736a795a2c9bb9",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
            ]
        },
        //监听
        watch: {
            //监听一个新的元素
            checks(newVal) {
                //判断如果新的元素的总长等于被勾起的总长
                if (newVal.length === this.goods.length) {
                    //全选按钮为 true
                    this.allCheck = true
                } else {
                    //不然全选按钮为 false
                    this.allCheck = false
                }
            }
        },
        //计算属性
        computed: {
            //总量
            total() {
                //被勾选的元素保留两位小数并且在未被勾选的时候值为0
                return (this.checks.reduce(function (total, item) {
                    //总量的计算：总量就等于 价格乘于数量
                    return total += item.price * item.inventory
                }, 0)).toFixed(2)
            }
        },
        //方法
        methods: {
            //全选改变条件
            allCheckChange(e) {
                
                let checked = e.target.checked

                //判断如果checked为true
                if (checked) {
                    //那么所有元素都别选择
                    this.checks = this.goods
                } else {
                    //不然就都取消勾选
                    this.checks = []
                }
            },
            add() {
                //如果全都没有填写就无法导入元素
                if (!this.code || !this.price || !this.goodsName) {
                    return
                }

                let obj = {
                    //id为随机值
                    id: Math.random().toString(32).substring(2),
                    goodsName: this.goodsName,
                    code: this.code,
                    //判断如果有照片地址就导入照片地址，没有就导入展位图
                    imgUrl: this.imgUrl ? this.imgUrl : 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg@260w_195h_1c_1e_1o_100sh.jpg',
                    price: this.price,
                    inventory: 1
                }
                //导入元素
                this.goods.push(obj)
            },
            //删除按钮
            del(i) {
                console.log(i);
                //点击删除元素
                this.goods.splice(i, 1)
            },
            //添加事件
            increase(item) {
                //数量加一
                item.inventory++
            },
            //减少事件 
            decrease(item) {
                //数量减少
                item.inventory--
            }
        }
    })
</script>